<template>
  <el-row>
    <el-col :span="16" :offset="4">
      <el-form  ref="form" :model="actorList" label-position="right" label-width="100px" >
        <el-form-item label="演员名称" prop="actorName">
          <el-input v-model="actorList.actorName" disabled></el-input>
        </el-form-item >
        <el-form-item label="演员介绍" prop="profile"  >
          <el-input v-model="actorList.profile"  disabled></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday" >
          <el-input disabled
            v-model="actorList.birthday" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" >
          </el-input >
        </el-form-item>
        <el-form-item label="性别" prop="sex"  >
          <el-select v-model="actorList.sex" disabled>
            <el-option v-for="item in sexList" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演员图片" prop="images">
          <el-image style="width: 100px;height: 100px;margin-right: 10px" v-for="item in this.fileList" :key="item.name" :src='item.url' :preview-src-list="fileInfo"></el-image>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
const initActor = {
  actorId: '',
  actorName: '',
  sex: '',
  birthday: '',
  profile: '',
  images: []
}
export default {
  name: 'ActorEdit',
  data () {
    return {
      fileList: [],
      fileInfo: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      actorList: { ...initActor },
      sexList: [{
        value: 0,
        label: '女'
      }, {
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '未知'
      }],
      uploadHeader: {
        token: ''
      },
      uploadPath: process.env.VUE_APP_BASE_API + '/upload'
    }
  },
  methods: {
    init () {
      if (this.$route.query.actorId) {
        this.$http.get('/sys/actor/info/' + this.$route.query.actorId).then(({ data }) => {
          if (data.code === 200) {
            const actor = data.data.actor
            const image = data.data.imageList
            this.fileList = image.map(item => {
              return {
                name: item.imageSrc,
                url: `${process.env.VUE_APP_BASE_API}/img/${item.imageSrc}`
              }
            })
            for (let i = 0; i < this.fileList.length; i++) {
              this.fileInfo.push(this.fileList[i].url)
            }
            this.actorList = {
              actorId: actor.actorId,
              actorName: actor.actorName,
              sex: actor.sex,
              birthday: actor.birthday,
              profile: actor.profile,
              images: data.data.imageList
            }
          } else { this.$confirm(data.msg) }
        })
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.init()
      this.uploadHeader.token = this.$cookies.get('token')
    })
  }
}
</script>

<style scoped>

</style>
